<!--
 * @Author: wang cong wangc9832@163.com
 * @Date: 2023-06-15 16:50:24
 * @LastEditors: wang cong wangc9832@163.com
 * @LastEditTime: 2023-06-16 11:05:10
 * @FilePath: /ams-front/src/components/Form/src/components/DatePickerSelect.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div style="width: 100%">
    <DatePicker
      style="width: 100%"
      :value="value"
      @change="changeDate"
      valueFormat="YYYY-MM-DD"
      :showToday="false"
    >
      <template #renderExtraFooter>
        <a @click="add(dayjs(props.value).add(365, 'day'))">+1年</a>
        <a @click="add(dayjs(props.value).add(730, 'day'))">+2年</a>
        <a @click="add(dayjs(props.value).add(1095, 'day'))">+3年</a></template
      ></DatePicker
    >
  </div>
</template>
<script lang="ts" setup>
import {
  defineComponent,
  PropType,
  ref,
  watchEffect,
  computed,
  unref,
  watch,
} from 'vue';
import dayjs from 'dayjs';
import { DatePicker } from 'ant-design-vue';
const emit = defineEmits(['update:value', 'change']);
const props = defineProps({
  value: Object,
});

const changeDate = () => {
  emit('update:value', dayjs(props.value));
  emit('change', dayjs(props.value));
};
const add = (val) => {
  emit('update:value', val);
  emit('change', val);
};
</script>
<style lang="less">
a {
  margin: 5px;
}
</style>
